{% load i18n %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE }}">
<head> 
  {% include 'includes/head.html' %}
  {% block extrastyle %}{% endblock extrastyle %}
  {% block extrahead %}{% endblock extrahead %}
  <style>
    .submenu-items .dropdown-item {
      padding-left: 1.5rem;
    }
  </style>
</head>

<body>
  {% block nav %}
    {% include 'includes/nav.html' %}
  {% endblock nav %}

  {% block sidebar %}
    {% include 'includes/sidebar.html' %}
  {% endblock sidebar %}

  <main class="content">
    {% include 'includes/messages.html' %}

    {% block header %}
      {% include 'includes/navigation.html' %}
    {% endblock header %}

    {% block content %}{% endblock content %}

    {% block theme_settings %}{% endblock theme_settings %}

    {% block footer %}
      {% include 'includes/footer.html' %}
    {% endblock footer %}
  </main>

  {% include "includes/notification.html" %}
  {% include 'includes/scripts.html' %}
  {% block extra_js %}{% endblock extra_js %}
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const toggle = document.getElementById('configToggle');
      const submenu = document.getElementById('configSubmenu');
  
      toggle.addEventListener('click', function (e) {
        e.preventDefault();
        e.stopPropagation(); // impede o fechamento automático
        submenu.classList.toggle('d-none');
      });
  
      // Fecha o submenu quando o dropdown principal for fechado
      document.querySelectorAll('.dropdown').forEach(dropdown => {
        dropdown.addEventListener('hide.bs.dropdown', function () {
          submenu.classList.add('d-none');
        });
      });
    });
  </script>
</body>
</html>
